<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>类型列表</title>
 
     <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/tips.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/popper.min.js"></script>

    <style>

        *{
            margin: 0px;
            padding: 0px;
        }
        
          .toast-center-center {
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -150px;
        }

    </style>
</head>
<body>

<div class="container shadow-sm p-3 mb-5 bg-white rounded">
    <div class="row">
        <div class="col-12 col-md-12">
            <input id="inputSub" type="text" style="width: 250px;"  class="form-control border-info float-left rounded-right rounded-0 order-0"/>

            <button id="btn-sub" type="button" class="btn btn-info rounded-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
                搜索类型</button>
            <button id="insert"  type="button" class="btn btn-info rounded-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                </svg>
                添加
            </button>

            <button type="button" id="refreshData" class="btn bg-info rounded-0 text-white"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
            </svg>刷新</button>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 col-md-12">
            <%--打印数据--%>
            <div>
                <table id="myType" data-mobile-responsive="true" style="table-layout:fixed;"></table>
            </div>
        </div>
    </div>

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <!--编号id  -->
            <input type="text" class="form-control d-none" id="hid" placeholder="id">
            <!--序列编号  -->
            <input type="text" class="form-control d-none" id="hNumber" placeholder="序列编号">

            <div class="modal-body">
                <input type="text" class="form-control" id="input_text" placeholder="请输入类型">
            </div>
            <div class="modal-footer">
                <button type="button" id="subData" class="btn btn-primary" data-dismiss="modal">提交</button>
            </div>
        </div>
    </div>
</div>


</body>


    <script type="text/javascript">

        var $table= $("#myType");
        var $insertBtn=$("#insert");
       // let state=true;//表示可插入状态
        var prefixPath="${pageContext.request.contextPath}";


        columnsData=[
            {
                field:"box",
                checkbox:true,//显示多选
                align:'center'
            }, {
                title:'序号',
                align:'center',
                field:"nums",
                formatter:function (value, row, index) {
                    //value：该cell本来的值，row：该行数据，index：该行序号（从0开始）
                    return index+1;
                }

            },{
                field:"id",
                visible:false,//隐藏
            }, {
                title:'类型',
                field:'type',//该列映射的data的参数名
                align:'center',

            }, {
                title:'操作',
                align:'center',
                field: 'ops',
                formatter:getOperation
            }
        ]



        $(function () {
          //加载下拉框
          $('.dropdown-toggle').dropdown();



          var oTable = new TableInit();
          oTable.Init("myType","get",prefixPath+"/etype/query",columnsData,queryParams);


          $("#btn-sub").click(function (){
                console.log(1)
              //likeQuery
              $table.bootstrapTable('destroy');
              val=$("#inputSub").val();
              oTable.Init("myType","get",prefixPath+"/etype/likeQuery",columnsData,queryParams2);

          });



       /*   //隐藏空白区域
          $(".fixed-table-container").hide();*/


          //刷新界面
          $("#refreshData").click(function (){
              window.parent.frames.detailed("/pj/tm");
          });

        //新增数据
          $insertBtn.on("click",function () {
              $("#myModalLabel").text("新增类型");
              $('#myModal').modal("show");
          });



          $("#subData").on("click",function () {
             
              var $val= $("#input_text").val();
              var url=prefixPath+"/etype/addType";
              var msg={"name":$val};
             var temp=  $("#myModalLabel").text();
             var title="新增";
              if (temp=="修改类型"){
                  url=prefixPath+"/etype/upType";
                  msg={"id":$("#hid").val(),"type":$val};
                  title="修改";
              }

              subData(url,msg,title);

              //刷新界面
              $table.bootstrapTable('destroy');
              oTable.Init("myType","get",prefixPath+"/etype/query",columnsData,queryParams);
          });


          customTips();

      });


        function queryParams2(params) {
            var temp={
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
                name:val,
            }
            return temp;
        }



        function queryParams(params) {
            var temp={
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
            }
            return temp;
        }

        function getOperation(value,row,index) {
            var id=row.id;
            var result="<button class='btn btn-info' style='margin-right: 10px' onclick='del("+id+")'><svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' class='bi bi-trash' viewBox='0 0 16 16'>"+
     	   "<path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/>"+
     		   "<path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/>"
     		 +"</svg>删除</button>" +
            "<button  class='btn btn-info' style='margin-right: 10px' onclick='upType("+id+","+index+")'><svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='currentColor' class='bi bi-pencil' viewBox='0 0 16 16'>"+
         	   "<path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/>"
         		  +" </svg>修改</button>";
         		  return result;
       
        }


        //删除
       function  del(id) {
            var f= confirm("是否要删除？");
            if (f){
                var url="${pageContext.request.contextPath}/etype/del";
                var newVal= parseInt(id);
                var msg={"id":newVal};
                $.get(url,msg,function (data) {
                    var d= JSON.parse(data);
                    if (d.state){
                        $table.bootstrapTable('remove', {
                            field: 'id',
                            values: [id]
                        })
                    }else {
                       toastr.error("服务器繁忙");
                    }

                });
            }
       }

    
        function upType(id,index) {
            console.log(index);
            $("#hid").val(id);
            $("#hNumber").val(index);
            $("#myModalLabel").text("修改类型");
            $('#myModal').modal("show");
           
        }

        
        

        //提交数据
        function subData(url,value,title) {
            $('#myModal').modal("hide");
                    $.ajax({
                      type:"post",
                      dataType:"json",
                      contentType:"application/json;charset=utf-8",
                      url:url,
                      data:JSON.stringify(value),
                      success:function (data) {
                          if (data.state){
                              toastr.success(title+"成功");
                              if (title == "修改") {
                                  var temp=value.type;
                                  $table.bootstrapTable("updateCell", {
                                      index:$("#hNumber").val(),
                                      field: 'type',
                                      value: temp,
                                  });
                              }else {
                                  $table.bootstrapTable("insertRow", {
                                      index: 0,
                                      row: {
                                          type: value.name,
                                      }

                                  });
                              }
                          }else{
                              toastr.error(title+"失败");
                          }
                      },
                      error:function (e) {
                          toastr.error("服务器异常");
                      }

                  });



        }




    </script>


</html>
